import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 创建路由表
const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/home/HomeIndex.vue"),
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "movies",
        component: () => import("../views/home/movies/MoviesView.vue"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "hot",
            component: () => import("../views/home/movies/hot/HotView.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "cinema",
            component: () =>
              import("../views/home/movies/cinema/CinemaView.vue"),
            meta: {
              requireAlive: false,
            },
          },
          {
            path: "wait",
            component: () => import("../views/home/movies/wait/WaitView.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "classic",
            component: () =>
              import("../views/home/movies/classic/ClassicView.vue"),
            meta: {
              requireAlive: true,
            },
          },
        ],
      },
      {
        path: "video",
        component: () => import("../views/home/video/VideoView.vue"),
        meta: {
          title: "猫眼视频",
        },
      },
      {
        path: "mini",
        component: () => import("../views/home/mini/MiniView.vue"),
        meta: {
          title: "猫眼小视频",
        },
        // 单个路由独享守卫
        // 只有进这个页面才会去执行里面的函数
        // beforeEnter: (to, from, next) => {
        //   // ...
        //   if (localStorage.getItem("token")) {
        //     next();
        //   } else {
        //     next("/city");
        //   }
        // },
      },
      {
        path: "show",
        component: () => import("../views/home/show/ShowView.vue"),
        meta: {
          requiredLogin: true,
          title: "猫眼表演",
        },
      },
      {
        path: "mine",
        component: () => import("../views/home/mine/MineView.vue"),
        // 路由元信息, 可以写一个任意对象
        meta: {
          requiredLogin: true,
          title: "我的页面",
        },
      },
    ],
  },
  // 动态路由
  {
    path: "/detail/:id",
    component: () => import("../views/detail/DetailIndex.vue"),
    // props: true加上以后，那么我们可以在组件里面直接通过props的方式接收到id
    props: true,
  },
  {
    path: "/city",
    component: () => import("../views/city/CityIndex.vue"),
  },
  // 404路由
  {
    path: "*",
    component: () => import("../views/404/NotFound.vue"),
  },
];

// 创建路由实例
const router = new VueRouter({
  // 设置路由模式为历史模式
  // mode: "history",
  routes,
  // 滚动行为的处理
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { x: 0, y: 0 };

    // 只有在前进和后退的时候可以保留位置
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// 全局前置守卫
// 只要url发生改变，就会触发
router.beforeEach((to, from, next) => {
  // to from表示要去的那个页面和来的那个页面的路由信息
  // console.log(to);
  // console.log(from);
  // next()执行就表示允许跳转了
  // next(false)表示阻止跳转
  // next("路径")表示重定向

  // 路由鉴权
  // 先判断要去的那个页面是否需要登录
  if (to.meta.requiredLogin) {
    // 判断是否登录过
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/city");
    }
  } else {
    // 放行
    next();
  }

  // 通过路由切换去改变页面的标题
  // document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
});

// 全局解析守卫
// 功能和用法是和全局前置守卫是一摸一样的，只是他们的执行时机有一些不同，比全局前置守卫会慢一些执行
// router.beforeResolve((to, from, next) => {});

// 全局后置钩子
router.afterEach((to) => {
  // console.log(to);
  // console.log(from);

  // 通过路由切换去改变页面的标题
  document.title = to.meta.title || "猫眼电影 - 娱乐看猫眼";
});

// 用于解决编程式导航重复点击的报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

export default router;
